<template>
  <div id="app">
    <div class="header" v-if="isLogin!='/login'" style="margin-bottom: 60px">
      <div class="title">
        <h3 style="color: white">
          LarkStation.cn
        </h3>
      </div>
      <div class="menu">
        <el-menu mode="horizontal" active-text-color="#a0d911" default-active="1" background-color="#f4ffb8">
          <el-menu-item index="1" @click="toHome">
            首页
          </el-menu-item>
          <el-menu-item index="2" @click="toSearch">
            搜索
          </el-menu-item>
          <el-menu-item index="3" @click="toClassView">
            分类浏览
          </el-menu-item>
          <el-menu-item index="4" @click="toSelf">
            我的
          </el-menu-item>
          <el-menu-item index="5" @click="tologin">
            登录
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <!--路由管道标签，任何符合某一路由(route)信息的组件都会在这个标签内展示出来 -->
    <router-view style="margin: 0px"></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data(){
      return{
        isLogin:this.$route.path
      }
    },
    mounted() {
    console.log(this.$route,this.$router)
      },
    methods:{
      toHome(){
        this.$router.push({path:'/'})
      },
      toClassView(){
        this.$router.push({path:'/classify'})
      },
      toSearch(){
        this.$router.push({path:'/search'})
      },
      toSelf(){
        this.$router.push({path:'self'})
      },
      tologin(){
        this.$router.push({path:'/login'})
      },
    }
  }
</script>
<!-- css格式 -->
<style scoped>
  body{
    margin: 0 auto;
    padding: 0;
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    justify-content: center;
    color: #2c3e50;
    background-color: #fcffe6;
  }
  .header{
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: space-between;
    background-color: #f4ffb8;
    position: fixed;
    width: 100%;
    box-shadow:1px 1px 10px #bfbfbf;
    z-index: 999;
  }
  .title{
    margin-left: 100px;
    background-color: #a0d911;
    padding-left: 20px;
    padding-right: 20px;
  }
  .menu{
    margin-right: 100px;
    font-weight: bold;
    background-color: #f4ffb8;
  }
</style>
